<template>
  <div class="Backstage">
    <div class="header">
      <div class="dian">电商后台</div>
      <div class="dsht">电商后台管理系统</div>
      <button class="tui" @click="tui">退出</button>
    </div>
    <div class="content">
      <el-container>
        <el-aside width="200px" style="background-color: #fff">
          <el-menu :router="true">
            <el-submenu :index="index+''" v-for="(item,index) in liebiaoo" :key="index">
              <template slot="title"><i class="el-icon-location"></i>{{item.authName}}</template>
              <el-menu-item-group v-for="(itema,indexa) in item.children" :key="indexa">
                <el-menu-item :index="itema.path"><i class="el-icon-menu"></i>{{itema.path}}{{itema.authName}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </el-container>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
    
  </div>
</template>

<script> 
import {menu} from "../api/api.js"
import axios from 'axios';
export default {
    data() {
      return {
        liebiaoo:[],
      }
    },
    methods:{
      liebiao(){
        var that=this
        menu().then(res=>{
          console.log(res)
          if(res.data.meta.status==200){
            // console.log("左边列表",res.data.data)
            that.liebiaoo=res.data.data;
          }
        })
      },
      //退出登录
      tui(){
        localStorage.removeItem('vuex');
        this.$store.commit('mapClearState',{})
        this.$router.push('/')
      },
    },
    created(){
      this.liebiao()
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Backstage{
  height:960px;
  width: 1920px;
}
.header{
  height:60px;
  background-color: #B3C0D0;
  display: flex;
  align-items: center; 
  justify-content:space-between;
  padding: 0 30px;
}
.dian{
  font-size: 40px;
}
.dsht{
  font-size: 25px;
  color: #fff;
  font-weight: bold;
}
.tui{
  border:none;
  background-color: transparent;
  font-size: 20px;
}
.content{
  background-color: #E9EEF3;
  position: relative;
}
.el-menu{
  height:900px;
}
.el-menu-item{
  padding-left: 50px !important;
}
.right{
  position: absolute;
  top: 15px;
  left: 230px;
}
</style>
